<template>
  <div class="header_container">
    <div class="header_logo">
      <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3074687533,300779410&fm=26&gp=0.jpg"/>
    </div>
    <div class="header_nav">
      <div class="header_nav_wrapper">
        <HeaderItem v-for="(title,index) in items"
        :key="index"
        :title="title"/>
      </div>
    </div>
    <div class="header_action">
      <button @click="onClick">购物车</button>
    </div>
  </div>
</template>

<script>
import HeaderItem from "./HeaderItem";
export default {
  components:{
    HeaderItem
  },
  data(){
    return{
      items:[
        "在线商城","坚果 Pro3","坚果 Pro2s","坚果 TNT工作站","应用","论坛"
      ]
    }
  },
  methods:{
    onClick(){
      this.$router.push("/about")
    }
  }
}
</script>


<style scoped>
.header_container
{
  width: 100vw;
  height: 50px;
  background-color: rgb(37, 38, 41);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.header_logo
{
  width: 15%;
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.header_nav
{
  width: 70%;
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.header_nav_wrapper
{
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.header_action
{
  width: 15%;
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.header_logo img
{
  width: 40px;
}
</style>